import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';
const {width} = Dimensions.get('window');
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import {IsNullObject} from '../../utils/utils';

class MyTabBar extends Component {
  //提供属性的类型检查
  static propTypes = {
    backgroundColor: PropTypes.string,
    height: PropTypes.number,
    current: PropTypes.number,
    iconSize: PropTypes.number,
    fontSize: PropTypes.number,
    color: PropTypes.string,
    selectedColor: PropTypes.string,
    tabList: PropTypes.array,
    onClick: PropTypes.func,
  };
  //设置默认属性
  static defaultProps = {
    height: 60,
    backgroundColor: '#f3f3f4', // 背景颜色
    current: 0, //当前选中的标签索引值，从 0 计数
    iconSize: 20, // 图标大小
    fontSize: 16, //字体大小
    color: '#4b4b4b', //未选中标签字体与图标颜色
    selectedColor: '#6190E8', //选中标签字体与图标颜色
    tabList: [], //tab 列表
  };
  constructor(props) {
    super(props);
    this.state = {
      selectIndex: -1,
    };
  }

  componentDidMount() {
    this.setState(
      {
        selectIndex: this.props.current,
      },
      () => {
        let item = this.props.tabList[this.props.current];
        if (this.props.onClick !== null && item !== null) {
          this.props.onClick(this.props.current, item.title);
        }
      },
    );
  }

  componentWillUnmount() {}

  render() {
    let tar_bar = {
      height: this.props.height,
      width: '100%',
      minHeight: 20,
      justifyContent: 'center',
      flexDirection: 'row',
      alignItems: 'flex-start',
    };
    return (
      <View
        style={{
          flexDirection: 'column',
          // marginTop: 5,
          backgroundColor: this.props.backgroundColor,
        }}>
        <View style={{width: '100%', height: 2, backgroundColor: '#e2e2e2'}} />
        <View style={tar_bar}>
          {this.props.tabList.map((item, index) => {
            let selectColor =
              this.state.selectIndex === index
                ? this.props.selectedColor
                : this.props.color;
            //text
            const text =
              IsNullObject(item.text) === true ? null : (
                <View
                  style={{
                    marginTop: -4,
                    padding: 3,
                    backgroundColor: 'red',
                    boxShadow: 0.8,
                    overflow: 'hidden',
                    lineHeight: 1.4,
                    borderRadius: 10,
                    zIndex: -1,
                    transaction: '50%',
                  }}>
                  <Text
                    style={{fontSize: this.props.fontSize - 10, color: '#FFF'}}>
                    {item.text}
                  </Text>
                </View>
              );
            // 大图标
            const icon =
              IsNullObject(item.icon) === true ? null : (
                <SimpleLineIcons
                  name={item.icon}
                  size={this.props.iconSize}
                  color={selectColor}
                />
              );
            return (
              <TouchableOpacity
                activeOpacity={0.8}
                key={index}
                onPress={() => {
                  this.setState(
                    {
                      selectIndex: index,
                    },
                    () => {
                      if (this.props.onClick !== null) {
                        this.props.onClick(index, item.title);
                      }
                    },
                  );
                }}>
                <View
                  style={{
                    height: '100%',
                    width: width / this.props.tabList.length,
                    backgroundColor:
                      item.backgroundColor === null
                        ? tar_bar.backgroundColor
                        : item.backgroundColor,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <View
                    style={{
                      alignItems: 'flex-start',
                      verticalAlign: 'middle',
                      flexDirection: 'row',
                    }}>
                    <View
                      style={{
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}>
                      {/*大图标*/}
                      {icon}
                      {/*文字*/}
                      <Text
                        style={{
                          fontSize: this.props.fontSize,
                          color: selectColor,
                        }}>
                        {item.title}
                      </Text>
                    </View>
                    {/*小文字显示*/}
                    {text}
                  </View>
                </View>
              </TouchableOpacity>
            );
          })}
        </View>
      </View>
    );
  }
}

export default MyTabBar;
